<template>
    <div class="layout">
        <div class="title">{{ weChart == 1 ? '素材浏览和分享趋势' : '朋友圈趋势' }}</div>
        <div class="btn">
            <div v-if="weChart == 1" class="btn_left">
                <el-radio-group v-model="currentIndex">
                    <el-radio-button label="1">浏览人数</el-radio-button>
                    <el-radio-button label="2">浏览次数</el-radio-button>
                    <el-radio-button label="3">浏览时长</el-radio-button>
                    <el-radio-button label="4">员工分享人数</el-radio-button>
                    <el-radio-button label="5">客户分享人数</el-radio-button>
                </el-radio-group>
                <!-- <div @click="change($event)" :class="['btn_item', currentIndex == 1 ? 'active' : '']" :id="1">浏览人数</div>
        <div @click="change($event)" :class="['btn_item', currentIndex == 2 ? 'active' : '']" :id="2">浏览次数</div>
        <div @click="change($event)" :class="['btn_item', currentIndex == 3 ? 'active' : '']" :id="3">浏览时长</div> -->
            </div>
            <div v-else class="btn_left">
                <el-radio-group v-model="currentId">
                    <el-radio-button label="1">点赞数</el-radio-button>
                    <el-radio-button label="2">评论数</el-radio-button>
                    <el-radio-button label="3">评论人数</el-radio-button>
                </el-radio-group>
                <!-- <div @click="changeMonment($event)" :class="['btn_item', currentId == 1 ? 'active' : '']" :id="1">点赞数</div>
        <div @click="changeMonment($event)" :class="['btn_item', currentId == 2 ? 'active' : '']" :id="2">评论数</div>
        <div @click="changeMonment($event)" :class="['btn_item', currentId == 3 ? 'active' : '']" :id="3">评论人数</div> -->
            </div>
            <el-button v-if="weChart == 1" @click="exportCustImg">导出</el-button>
            <el-button v-if="weChart != 1" v-auth="'CUSTOMER_LABEL_EXPORT'" @click="exportFriendImg">导出</el-button>
            <!-- <div class="btn_right" v-show="weChart == 1" @click="exportCustImg"> 导出 </div>
      <div class="btn_right" v-show="weChart != 1" v-auth="'CUSTOMER_LABEL_EXPORT'" @click="exportFriendImg"> 导出 </div> -->
        </div>
        <div v-show="weChart == 1 && !isNoMessage1" id="echarts" ref="myRef" class="line"></div>
        <div v-show="weChart == 1 && isNoMessage1" class="no_data">
            <img class="no_img" src="@/assets/noData.png" alt="" />
            <div class="no_title">暂无数据</div>
        </div>
        <div v-show="weChart != 1 && !isNoMessage2" id="echarts" ref="myRef2" class="line"></div>
        <div v-show="weChart != 1 && isNoMessage2" class="no_data">
            <img class="no_img" src="@/assets/noData.png" alt="" />
            <div class="no_title">暂无数据</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, nextTick, watch, reactive } from 'vue';
import { export2Img } from '@/utils/utils';
const echarts = inject('ec');
const currentIndex = ref(1);
const currentId = ref(1);
const myRef = ref(null);
const myRef2 = ref(null);
const isNoMessage1 = ref(false);
const isNoMessage2 = ref(false);

const tabs = reactive<Array<any>>([
    {
        label: '1',
        title: '浏览人数'
    },
    {
        label: '2',
        title: '浏览次数'
    },
    {
        label: '3',
        title: '浏览时长'
    },
    {
        label: '4',
        title: '员工分享人数'
    },
    {
        label: '5',
        title: '客户分享人数'
    }
]);
const props = defineProps(['chartData', 'chartTime', 'weChart', 'momentChart', 'monmentTime']);
const emit = defineEmits({
    chengeIndex: null,
    chengeId: null
});
//浏览趋势导出
const exportCustImg = () => {
    const title = tabs.find(item => item.label == currentIndex.value).title;
    export2Img(myRef.value, title);
};
//朋友圈趋势导出
const exportFriendImg = () => {
    if (currentId.value == 1) {
        export2Img(myRef2.value, '点赞数');
    } else if (currentId.value == 2) {
        export2Img(myRef2.value, '评论数');
    } else {
        export2Img(myRef2.value, '评论人数');
    }
};
//切换浏览朋友圈
const changeMonment = (event: any) => {
    currentId.value = event.target.id;
    emit('chengeId', currentId.value);
};
const baseData = ref([]);
// 素材
const getChart = (data?: any) => {
    if (data.length == 0) {
        isNoMessage1.value = true;
        return;
    } else {
        isNoMessage1.value = false;
    }
    const myChart = echarts.init(myRef.value);
    const title = tabs.find(item => item.label == currentIndex.value).title;
    myChart.setOption({
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: 60,
            bottom: 10,
            left: 32,
            right: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.chartTime
        },
        yAxis: {
            type: 'value',
            name: currentIndex.value == 3 ? '秒' : currentIndex.value == 2 ? '次' : '人',
            nameGap: 10, // y轴name与横纵坐标轴线的间距
            nameTextStyle: {
                padding: [0, 35, 10, 0] // 加上padding可以调整其位置
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#969696'
            },
            splitLine: {
                lineStyle: {
                    type: 'line',
                    color: '#e8e8e8' // 分割线颜色
                }
            }
        },
        series: [
            {
                // name: currentIndex.value == 1 ? '浏览人数' : currentIndex.value == 2 ? '浏览次数' : '浏览时长',
                name: title,
                data: data,
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 0,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#F8DCD1' },
                            { offset: 0.5, color: '#FDF8F6' },
                            { offset: 1, color: '#FFFAF9' }
                        ])
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        color: '#FF9D23'
                    }
                },
                emphasis: {
                    // 鼠标 hover 时的样式
                    itemStyle: {
                        color: '#FF9D23', // hover 圆点颜色
                        borderColor: '#FF9D23', // hover 圆点边框颜色
                        borderWidth: 8
                    }
                }
            }
        ]
    });
    nextTick(() => {
        myChart.resize();
    });
    window.onresize = function () {
        myChart.resize();
    };
};
// 朋友圈素材
const getChart2 = (data?: any) => {
    if (data.length == 0) {
        isNoMessage2.value = true;
        return;
    } else {
        isNoMessage2.value = false;
    }
    const myChart = echarts.init(myRef2.value);
    myChart.setOption({
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: 60,
            bottom: 10,
            left: 32,
            right: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.monmentTime
        },
        yAxis: {
            type: 'value',
            name: currentId.value == 3 ? '人' : '次',
            nameGap: 10, // y轴name与横纵坐标轴线的间距
            nameTextStyle: {
                padding: [0, 35, 10, 0] // 加上padding可以调整其位置
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#969696'
            },
            splitLine: {
                lineStyle: {
                    type: 'line',
                    color: '#e8e8e8' // 分割线颜色
                }
            }
        },
        series: [
            {
                name: currentId.value == 1 ? '点赞数' : currentId.value == 2 ? '评论数' : '评论人数',
                data: data,
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 0,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#F8DCD1' },
                            { offset: 0.5, color: '#FDF8F6' },
                            { offset: 1, color: '#FFFAF9' }
                        ])
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        color: '#FF9D23'
                    }
                },
                emphasis: {
                    // 鼠标 hover 时的样式
                    itemStyle: {
                        color: '#FF9D23', // hover 圆点颜色
                        borderColor: '#FF9D23', // hover 圆点边框颜色
                        borderWidth: 8
                    }
                }
            }
        ]
    });
    nextTick(() => {
        myChart.resize();
    });
    window.onresize = function () {
        myChart.resize();
    };
};
watch(
    () => props.chartData,
    val => {
        getChart(val);
    }
);
watch(
    () => props.momentChart,
    val => {
        getChart2(val);
    }
);
watch(currentIndex, v => {
    currentIndex.value = v;
    emit('chengeIndex', v);
});
watch(currentId, v => {
    currentId.value = v;
    emit('chengeId', v);
});
</script>

<style lang="scss" scoped>
.layout {
    height: 530px;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    background-color: #ffff;

    .title {
        display: flex;
        align-items: center;
        height: 56px;
        padding: 0 24px;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #eaeaea;
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        margin-top: 20px;

        .btn_left {
            display: flex;
            align-items: center;

            .btn_item {
                padding: 10px 18px;
                background: #fff;
                font-size: 16px;
                line-height: 16px;
                font-weight: 500;
                color: #ff6b00;
                border: 1px solid #ff6b00;
                cursor: pointer;
            }

            .active {
                background: #ff6b00;
                color: #fff;
            }
        }

        .btn_right {
            display: inline-block;
            width: 64px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            cursor: pointer;
        }
    }

    .line {
        width: 100%;
        height: calc(100% - 130px);
    }

    .no_data {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 24px;
        }

        .no_title {
            color: #909399;
            font-size: 14px;
        }
    }
}
</style>
